import { useState } from 'react';
import { Select, Input } from 'antd';
import type { GetProps } from 'antd';
import Navigation from '../../components/Navigation/index.tsx';
import Rightnav from '../../components/rightnav/rightnav.tsx';
import ColorSelector from '../../components/ColorSelector/ColorSelector.tsx';
import PaginationComponent from '../../components/Pagination.tsx';
import { adscenedata, adsortdata, initialOptions, alladData } from './uidesign.ts';
import './uidesign.css';

type SearchProps = GetProps<typeof Input.Search>;
const { Search } = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const Uidesign = () => {
    const [highlightedIndex, setHighlightedIndex] = useState(0);
    const [selectedIndex3, setSelectedIndex3] = useState<number>(0);
    const [selectedIndex4, setSelectedIndex4] = useState<number>(0);
    const [filteredData, setFilteredData] = useState(alladData);
    const [options, setOptions] = useState(initialOptions);
    const [currentPage, setCurrentPage] = useState(1);
    const pageSize = 20;

    const handleClick4 = (index: number) => {
        setSelectedIndex4(index);
    };

    const handleChange4 = (value: string) => {
        console.log(`selected ${value}`);
    };

    const handleClick3 = (index: number) => {
        setSelectedIndex3(index);
    };

    const handleMouseEnter = (index: any) => {
        if (highlightedIndex === null) {
            setHighlightedIndex(index);
        }
    };

    const handleClick = (index: any, value: string) => {
        setHighlightedIndex(index);
        const newFilteredData = value === "全部" ? alladData : alladData.filter(item => item.scene === value);
        setFilteredData(newFilteredData);
    };

    const toggleOption = (id: string) => {
        const newOptions = options.map((option: any) =>
            option.id === id ? { ...option, isSelected: !option.isSelected } : option
        );
        setOptions(newOptions);
    };

    const handlePageChange = (pageNumber: number) => {
        setCurrentPage(pageNumber);
    };

    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    let paginatedData = filteredData.slice(startIndex, endIndex);

    return (
        <div className='advertisement_box'>
            <div className='Navigation'>
                <Navigation />
            </div>
            <Rightnav />
            <div className="advertisement_box_nei">
                {/* 上部分 */}
                <div className='advertisement_top'>
                    <div className='advertisement_top_nei'>
                        {/* 上部分标题 */}
                        <div className='advertisement_top_title'>
                            <div
                                className={`advertisement_top_title advertisement_top_title1 ${selectedIndex4 === 0 ? 'selected' : ''}`}
                                onClick={() => handleClick4(0)}
                            >

                                UI设计
                            </div>
                            <div
                                className={`advertisement_top_title advertisement_top_title2 ${selectedIndex4 === 1 ? 'selected' : ''}`}
                                onClick={() => handleClick4(1)}
                            >
                                
                                新媒体配图
                            </div>
                        </div>
                        {/* 上部分 搜索框等 */}
                        <div className='advertisement_top_position'>
                            <div>当前位置</div>
                            <div>
                                <Select
                                    defaultValue="UI设计"
                                    style={{ width: 100 }}
                                    onChange={handleChange4}
                                    options={[
                                        { value: 'UI设计', label: 'UI设计' },
                                        { value: '新媒体配图', label: '新媒体配图' }
                                    ]}
                                />
                            </div>
                            <div>共<span className='orange'>116891</span>个结果</div>
                            <div>
                                <Search
                                    placeholder="请输入关键词"
                                    allowClear
                                    enterButton="搜索"
                                    size="large"
                                    onSearch={onSearch}
                                />
                            </div>
                        </div>
                        {/* 上部分筛选 */}
                        <div className='advertisement_top_screen'>
                            <div className='advertisement_top_screen1'>
                                <div className='advertisement_top_screen1_left orange'>场景:</div>
                                <div className='advertisement_top_screen1_right'>
                                    {adscenedata.map((item, index) => (
                                        <div
                                            key={index}
                                            onMouseEnter={() => handleMouseEnter(index)}
                                            onClick={() => handleClick(index, item)}
                                            style={{
                                                backgroundColor: highlightedIndex === index ? 'orange' : 'transparent',
                                                color: highlightedIndex === index ? 'white' : 'black',
                                                borderRadius: '10px',
                                                transition: 'background-color 0.3s, color 0.3s',
                                                cursor: 'pointer'
                                            }}
                                        >
                                            <a>{item}</a>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='ColorSelector'>
                    <div className='ColorSelector_text'>颜色搜索</div>
                    <ColorSelector />
                </div>
                <div className='advertisement_main'>
                    <div className='advertisement_main_top'>
                        <div className='advertisement_main_top_left'>
                            排序方式:
                            {adsortdata.map((item, index) => (
                                <div
                                    key={index}
                                    onClick={() => handleClick3(index)}
                                    style={{
                                        color: index === selectedIndex3 ? 'orange' : 'black',
                                        cursor: 'pointer'
                                    }}
                                >
                                    {item}
                                </div>
                            ))}
                            <div style={{ color: "#ccc" }}>|</div>
                        </div>
                        <div className='advertisement_main_top_right'>
                            <div>素材类型:</div>以后                            {options.map((option: any) => (
                                <div key={option.id} style={{ marginBottom: '10px' }}>
                                    <input
                                        type="checkbox"
                                        id={`checkbox-${option.id}`}
                                        checked={option.isSelected}
                                        onChange={() => toggleOption(option.id)}
                                    />
                                    <label htmlFor={`checkbox-${option.id}`}>{option.label}</label>
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className='advertisement_main_center'>
                        {paginatedData.map((item: any, index: number) => (
                            <div className='PosterBody_list_item' key={index} style={{ position: 'relative' }}>
                                <div className='PosterBody_list_item_xaun'>正版</div>
                                <img src={item.image} alt="" className='PosterBody_list_item_img' />
                                <div style={{ display: "none" }}>{item.scene}</div>
                                <div className="p_overlay">
                                    <div className="p_overlay_title">
                                        {item.name}<span>☆</span><button>版权授权</button>
                                    </div>
                                    <div className="p_overlay_button">
                                        <button className='p_overlay_button_edit'>在线编辑</button><br /><br />
                                        <button className='p_overlay_button_download'>点击下载</button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className='adpage'>
                    <PaginationComponent
                        currentPage={currentPage}
                        total={filteredData.length}
                        pageSize={pageSize}
                        onPageChange={handlePageChange}
                        showSizeChanger={false}
                    />
                </div>
            </div>
        </div>
    );
};

export default Uidesign;